import React, { useState } from 'react';
import { Table, Space, Button, Modal, Form, Input, message } from 'antd';
import { useSearchParams } from 'react-router-dom'
import { useApi, useApiParams } from '@/hooks/useApi';
import { addApiData, fetchApiDataList, fetchApiInfo } from '@/api/apiData';
import ReactJson from 'react-json-view'
import { useApiData } from '@/hooks/useApiData';
const DataManagement: React.FC = () => {
    const [searchParam] = useSearchParams();
    const [show, setShow] = useState(false)
    const [key, setKey] = useState(0)
    const id = searchParam.get("id") || '';
    const [data, setData] = useApiParams(fetchApiInfo, 0, id);
    // 这个数据有依赖，所以放在里面
    const [json, setJson] = useApiData(key, id);
    const [form] = Form.useForm();
    const handleAdd = (values: any) => {
        return false;
    }
    const handleDelete = (values: any) => {
        return false;
    }
    const handleOk = () => {
        form.submit();
    }
    const onFinish = async (values: any) => {
        const { apiData } = values;
        const res = await addApiData(JSON.parse(apiData));
        if (res.code !== 0) return message.error(res.msg);
        message.success("新增成功");
        setKey(key + 1);
        setShow(false);
    }
    // 获取所有表
    return (
        <div className='api-data-content'>
            <div className='data-title'>
                <div>当前接口名称： {data.apiName}</div>
                <div>当前接口地址： {data.apiPath}</div>
                <div>当前接口请求方式： {data.apiType}</div>
            </div>
            <div className='data-tip'>
                说明：
                <div className='tip' style={{ padding: 10 }}>
                    1. 在添加数据前，请确保添加了同名 <strong>put</strong> 接口，增加数据会调用put方法进行添加数据
                    <br />
                    2.
                    <div style={{ paddingLeft: 20 }}>
                        2.1 默认情况下数据会返回一个list，如果需要请求带id的信息可以添加带id的接口
                        <br />
                        如  /api/user/info  -&gt; /api/user/info/:id
                        <br />
                        2.2 如果没有id, 可以传入一个参数类型,参数使用type，会自动解析type值，目前定义为 1 单条数据    不传默认list数据
                        <br />
                        如  /api/user/info  -&gt; /api/user/info?type=1
                    </div>
                    3. 下面数据展示方式，按照data的取值展示，具体数据结构可查看控制台
                </div>
            </div>
            <div className='data-json'>
                <div style={{ fontSize: 16, height: 40, lineHeight: '40px' }}>数据
                    <Button type='primary' style={{ float: 'right' }} onClick={() => setShow(true)}>添加数据</Button>
                </div>
                <br />
                <ReactJson src={json} onAdd={handleAdd} onDelete={handleDelete}></ReactJson>
            </div>
            <Modal title="添加数据" visible={show} onOk={handleOk} onCancel={() => setShow(false)}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 16 }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="接口名称"
                        name="apiName"
                    >
                        {data.apiName}
                    </Form.Item>
                    <Form.Item
                        label="接口地址"
                        name="apiPath"
                    >
                        {data.apiPath}
                    </Form.Item>
                    <Form.Item
                        label="接口请求方式"
                        name="apiPath"
                    >
                        put
                    </Form.Item>
                    <Form.Item
                        label="接口数据"
                        name="apiData"
                    >
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default DataManagement; 
